<template>
  <div class="list">
    <header v-show='isShow'>
      <div class="header">
        <div class="search-return" @click="back">
          <i class="iconfont icon-return"></i>
        </div>
        <div class="search-main">
          <i class="iconfont icon-iconfont-seach"></i>
          <!-- 在移动端input应该加一个form表单外壳 -->
          <form action="" onsubmit="return false" @click="goSearch">
            <input
              type="search"
              placeholder="搜索你喜欢的产品..."
              v-model="searchVal"
            />
          </form>
        </div>
        <div class="search-btn">
          <i class="iconfont icon-home"></i>
        </div>
      </div>
    </header>

    <section>
      <div class="list-l" ref="left">
        <ul class="l-item">
          <li
            :class="{ active: index == currentIndex }"
            v-for="(item, index) in leftData"
            :key="index"
            @click="goScroll(index)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="list-r" ref="right">
        <div>
          <div class="AD">
            <img
              src="https://img.tea7.com/0167148_0.jpeg?x-oss-process=image/resize,w_400"
              alt=""
            />
          </div>
          <ul class="shop-list" v-for="(item, index) in rightData" :key="index">
            <li v-for="(v, i) in item" :key="i">
              <h2>- {{ v.name }} -</h2>
              <ul class="r-content">
                <li v-for="(d, j) in v.list" :key="j">
                  <img :src="d.imgUrl" alt="" />
                  <span>{{ d.name }}</span>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from "@/components/common/Tabbar.vue";
import http from "@/common/api/request.js";

//引入插件
import BetterScroll from "better-scroll";

export default {
  name: "List",
  components: {
    Tabbar,
  },
  data() {
    return {
      searchVal: "",
      leftData: [], //左侧数据
      rightData: [], //右侧数据
      leftBscroll: null, //左侧滑动Bscroll
      rightBscroll: null, //右侧滑动Bscroll
      allHeight: [], //承载右侧每一个模块的高度
      scrollY: "", //右侧滚动距离
	  isShow:true,
    };
  },
  computed: {
    currentIndex() {
      return this.allHeight.findIndex((item, index) => {
        return this.scrollY >= item && this.scrollY < this.allHeight[index + 1];
      });
    },
  },
  created() {
    this.getData();
  },
  methods: {
	//到搜索页
	goSearch(){
		this.$router.push("/search")
	},
    //退回
    back() {
      this.$router.push({
        name: "Home",
      });
    },

    //获取数据
    async getData() {
      let res = await http.$axios({
        url: "/api/goods/list",
      });
      let leftArr = [];
      let rightArr = [];

      res.forEach((v) => {
        leftArr.push({
          id: v.id,
          name: v.name,
        });
        rightArr.push(v.data);
      });
      this.leftData = leftArr;
      this.rightData = rightArr;

      //保证DOM渲染完毕后在执行
      this.$nextTick(() => {
        this.initBs();
      });
    },

    //滚动
    initBs() {
      let right = this.$refs.right;
      let left = this.$refs.left;
      //右侧滑动
      this.rightBscroll = new BetterScroll(right, {
        // bounce: false, //阻止scroll回弹
        probeType: 3,
        movale: true,
        zoom: true,
        observeDOM: true, //解决刷新后依然有滚动效果
		bounce:false ,//取消回弹效果
      });
      //左侧滑动
      this.leftBscroll = new BetterScroll(left, {
        bounce: false, //阻止scroll回弹
        click: true,
        movale: true,
        zoom: true,
        observeDOM: true, //解决刷新后依然有滚动效果
      });

      //统计右侧所有板块的高度值，放入数组中
      let height = 0;
      this.allHeight.push(height);
      //获取右侧每一块的高度
      let uls = this.$refs.right.getElementsByClassName("shop-list");
      //把dom对象转换成真正的数组
      Array.from(uls).forEach((v) => {
        height += v.clientHeight;
        this.allHeight.push(height);
      });
      // console.log(this.allHeight)

      //获取右侧滚动的值
      this.rightBscroll.on("scroll", (pos) => {
        //最后一次触发
        // this.rightBscroll.on('scroll', (pos)=>{//频繁触发
        // console.log(pos)
        this.scrollY = Math.abs(pos.y);
		
		//达到一定的高度，隐藏头部搜索栏
		if(this.scrollY > 60){
			this.isShow = false
		}else{
			this.isShow = true
		}
      });
    },

    //模块联动
    goScroll(index) {
      this.rightBscroll.scrollTo(
        0,
        // -this.allHeight[index] - index * 30,
        -this.allHeight[index] - index - 130,
        500
      );
    },
  },
};
</script>

<style scoped lang="less">
.list {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 1.2rem;
    background-color: #b0352f;
    color: #fff;

    .search-return {
      padding: 0 0.25rem;

      i {
        font-size: 0.75rem;
      }
    }

    .search-main {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 0.8rem;
      width: 7.2rem;
      border-radius: 0.75rem;
      background-color: #fff;

      form {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80%;
        // color: #999

        input {
		  font-size: 0.4rem;
          width: 100%;
          color: #000;
        }
      }
      i {
        color: #999;
        margin: 0 0.125rem 0 -0.5rem;
      }
    }

    .search-btn {
      padding: 0 0.25rem;
      font-size: 0.48rem;

      i {
        font-size: 0.6rem;
        color: #fff;
      }
    }
  }

  section {
    display: flex;
    flex: 1;
    overflow: hidden;

    .list-l {
      width: 25%;
      background-color: #fff;
      overflow: hidden;
      .l-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        li {
          width: 100%;
          line-height: 1.2rem;
          text-align: center;
          font-size: 0.38rem;

          &.active {
            color: #b54f4a;
            border-left: 5px solid #b54f4a;
          }
        }
      }
    }

    .list-r {
      width: 75%;
      height: 100%;
      overflow: hidden;
      border-left: solid 1px #f0f0f0;

      .AD {
        width: 100%;

        img {
          width: 100%;
          margin-bottom: 0.5rem;
        }
      }

      .shop-list {
        text-align: center;

        h2 {
          font-size: 0.5rem;
          font-weight: 400;
          // padding: 0.2rem 0 ;
          color: #999;
        }
        .r-content {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 1rem;

          li {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 0.4rem 0 0 0.4rem;

            img {
              width: 2rem;
              hieght: 2rem;
            }
            span {
              font-size: 0.35rem;
            }
          }
        }
      }
    }
  }
  /deep/.tabbar {
    border-top: 1px solid #f0f0f0;
  }
}
</style>
